import React, { Component } from 'react'

export default class App extends Component {
  state = {
    age: 18,
  }
  handleClick = () => {
    // 如何拿到立即更新后的结果呢？
    // 解决方式，在回调里面处理
    /* this.setState({ age: this.state.age + 1 }, () => {
      console.log(this.state.age)
    }) */

    /* this.setState({ age: this.state.age + 1 })
    this.setState({ age: this.state.age + 2 })
    this.setState({ age: this.state.age + 3 })

    console.log(this.state.age) // 打印结果是 18，视图结果合并后的 21 */

    // 有没有办法，把视图的结果变成 24 呢（我就想进行累计）？

    // 了解一种新的语法
    /* this.setState({ age: this.state.age + 1 })
    // setState 的第一个参数也可以接受一个函数，函数的返回值，表示要更新数据
    this.setState(() => {
      return {
        age: this.state.age + 2,
      }
    })
    this.setState(() => ({ age: this.state.age + 3 }))

    console.log(this.state.age) // 打印结果是 18，视图结果合并后的 21 */

    // !如何进行累计的操作？
    this.setState({ age: this.state.age + 1 })
    // setState 的第一个参数也可以接受一个函数，函数的返回值，表示要更新数据
    // prevState => 表示上一次更新完毕后的 state
    this.setState((prevState) => {
      return {
        age: prevState.age + 2,
      }
    })
    this.setState(
      (prevState) => ({ age: prevState.age + 3 }),
      () => {
        console.log(this.state.age)
      }
    )
    // console.log(this.state.age) // 打印结果还是 18，视图结果是累计后的 24
  }
  render() {
    return (
      <div>
        App {this.state.age}
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }

  componentDidUpdate() {
    console.log(this.state.age, '~~~~~~~~~~~~~')
  }
}
